<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<span id="errorMsg" style="color: #FF0000;">错误信息</span>
<form action="#">
    <input type="text" name="account" placeholder="请输入账号">
    <input type="password" name="password" placeholder="请输入密码">
    <button type="button" onclick="login()">登录</button>
</form>
<script>
    /*
          1. 输入验证，账号不能为空，去除空格，长度不能少于6个
          2. 密码，不能为空，可以使用空格，长度不能少于6个。
          4. 登录成功，跳转到书本购物车页面，并在购物车页面右上角显示，当前登陆的账号
          5. 登录失败，提示账号或密码错误。不推荐使用alert。将错误信息显示在标题的上面，用红色标注
   */
    let errorMsg = document.querySelector("#errorMsg");
    errorMsg.hidden = true;
    let form = document.querySelector("form");

    function login() {
        // 必须是点击事件中才能去获取内容
        let account = form["account"].value;
        let password = form["password"].value;
        console.log(account, password);

        // if (account.trim().length == 0) {
        if (account == ""){
            errorMsg.hidden = false;
            errorMsg.textContent = "账号不能为空";
            return;
        }
        if (password == ""){
            errorMsg.hidden = false;
            errorMsg.textContent = "密码不能为空";
            return;
        }
        if (password.length < 6) {
            errorMsg.hidden = false;
            errorMsg.textContent = "密码长度不能小于6位";
            return;
        }

        // 账号是admin，密码是123456
        if ("admin" == account && password == "123456") {
            alert("登录成功");
        } else {
            alert("登录失败");
        }
    }
</script>
</body>
</html>